<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="false">

			<block slot="content">登录</block>
		</cu-custom>
		<view class="padding radius isTop">
			<view class="text-center">
				<view class="cu-avatar round xl lg text-pink cuIcon-cameraaddfill "></view>
			</view>

			<view class="cu-form-group round margin-top-xl">
				<text class="cuIcon-profile let text-pink"></text>
				<input placeholder="请输入您的手机号" v-model="mobile" maxlength="11"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-form-group margin-top round">
				<text class="cuIcon-lock let text-pink"></text>
				<input placeholder="请输入您的密码" type="password" v-model="password"></input>
			</view>

		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-pink lg round" @click="login()">确认登录</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				password: ''
			}
		},
		onLoad() {

		},
		methods: {
			login: async function() {
				if (!this.mobile) {
					this.$common.errorToShow('请输入登录账号！');
					return;
				}
				if (!this.password) {
					this.$common.errorToShow('请输入登录密码！');
					return;
				}
				if (false === this.$common.isPhoneNumber(this.mobile)) {
					this.$common.errorToShow('手机号码格式错误！');
					return;
				}
				if (this.password.length < 6) {
					this.$common.errorToShow('请输入正确密码！');
					return;
				}
				let result = await this.$api.mobilelogin({
					mobile: this.mobile,
					password: this.password
				});

				if (result.code == 1) {
					this.$db.set('userinfo', result.data);
					this.$common.successToShow(result.msg, () => {
						setTimeout(() => {
							uni.hideToast();
							uni.navigateTo({
								url: '/pages/user/index'
							})
						}, 1000)
					})
				} else {
					this.$common.errorToShow(result.msg);
				}

			}

		}
	}
</script>

<style>
	/* #ifdef H5 */
	uni-page-body {
		height: 100%;
		background-image: linear-gradient(45deg, #ec008c, #6739b6);
	}

	/*  #endif  */
	.let {
		margin-right: 10upx;
	}

	.isTop {
		padding-top: 20%;
	}

	.cu-avatar.xl {
		width: 158upx;
		height: 158upx;
		font-size: 2.5em;
	}
</style>
